<template>
  <table class="table" cellspacing="0" cellpadding="0">
    <thead class="header" :style="headerStyle">
      <tr>
        <th
          v-for="(col, cidx) in columns"
          :key="col.key"
          :width="col.width"
          :align="col.align"
          :style="`padding-left:${cidx == 0 ? '12px' : ''};padding-right:${
            cidx == columns.length - 1 ? '12px' : ''
          };`"
        >
          {{ col.name }}
        </th>
      </tr>
    </thead>
    <tbody class="body">
      <tr class="row" v-for="(item, index) in data" :key="index">
        <td
          v-for="(col, cidx) in columns"
          :key="col.key + '.' + index"
          :align="col.align"
          :style="`padding-left:${cidx == 0 ? '12px' : ''};padding-right:${
            cidx == columns.length - 1 ? '12px' : ''
          };${bordered ? 'border-bottom: solid 5px #f5f5f5;' : ''}`"
        >
          <div v-if="col.render" v-html="col.render(item)"></div>
          <template v-else>{{ item[col.key] }}</template>
        </td>
      </tr>
    </tbody>
    <tfoot v-show="!loading && !data.length">
      <tr>
        <td class="footer" :colspan="columns.length">暂无记录</td>
      </tr>
    </tfoot>
  </table>
</template>

<script>
import { onMounted, inject, ref, reactive } from "vue";
export default {
  name: "Table",
  components: {},
  props: {
    columns: {
      type: Array,
      default: [],
    },
    data: {
      type: Array,
      default: [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    bordered: {
      type: Boolean,
      default: true,
    },
    headerStyle: {
      type: Object,
      default: {
        background: "#eceff6",
        borderRadius: "6px",
      },
    },
  },
  setup(props, context) {
    return {};
  },
};
</script>
<style lang="less" scoped>
.table {
  table-layout: fixed;
  width: 100%;
  text-align: left;
  border-radius: 2px 2px 0 0;
  border-collapse: separate;
  border-spacing: 0;
  position: relative;
  background-color: #fff;
  .header {
    width: 100%;
    // background: #eceff6;
    // border-radius: 6px;
    th {
      font-family: PingFangSC-Medium;
      letter-spacing: 0;
      padding: 13px 0;
      font-size: 13px;
      color: #959bb2;
      overflow-wrap: break-word;
    }
  }
  .body {
    tr {
      width: 100%;
      padding: 13px 10px;
      border-radius: 6px;
      overflow: hidden;
      td {
        padding: 13px 0;
        // border-bottom: solid 5px #f5f5f5;
        font-family: Avenir-Roman;
        font-size: 13px;
        color: #121d4e;
        letter-spacing: 0;
        overflow-wrap: break-word;
        span {
          color: #121d4e;
        }
      }
    }
  }
}
.footer {
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #b5bace;
  letter-spacing: 0;
  width: 100%;
  text-align: center;
  padding: 40px 0;
  margin-top: 10px;
}
</style>